/**
 * @description 分享或支付蒙层
 */
import React from 'react';
import classnames from "classnames";
import style from "./styles/App.less";
import { Button } from 'wd-mobile';
import util from "commons/util";

import img_pay from "./images/pay.png";
import img_share from "./images/share.png";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showInner: this.props.show,
      showOuter: this.props.show
    };
  }

  // static getDerivedStateFromProps(props, state){
  //   console.log(props, state)
  //   state.show = props.show;
  //   return state;
  // }

  componentDidUpdate(prevProps) {
    if (prevProps.show != this.props.show) {
      if (!this.props.show) {
        this.setState({
          showInner: this.props.show
        })
        setTimeout(() => {
          this.setState({
            showOuter: this.props.show
          })
        }, 300)
      } else {
        this.setState({
          showOuter: this.props.show
        })
        setTimeout(() => {
          this.setState({
            showInner: this.props.show
          })
        })
      }
    }
  }

  render() {
    return (
      <div className={classnames("x-shareOrPayLayer", {
        "x-shareOrPayLayer-show": this.state.showOuter
      })}>
        <div className={classnames("x-shareOrPayLayer-wrapper", {
          "x-shareOrPayLayer-wrapper-show": this.state.showInner
        })}>
          {
            (util.isWeixin() || util.isDingTalk())&& <img className="x-shareOrPayLayer-img" src={this.props.type == "pay" ? img_pay : img_share} alt="" />
          }
          {
            this.props.type != "pay" && <Button className="x-shareOrPayLayer-button" onClick={() => {
              this.props.onClick && this.props.onClick();
            }}>我知道了</Button>
          }
          {
            !util.isWeixin() && this.props.type == "pay" && <Button className="x-shareOrPayLayer-button x-shareOrPayLayer-button-payAgain" onClick={() => {
              this.props.payAgain && this.props.payAgain();
            }}>继续支付</Button>
          }
          {
            !util.isWeixin() && this.props.type == "pay" && <Button className="x-shareOrPayLayer-button x-shareOrPayLayer-button-payDone" onClick={() => {
              this.props.payDone && this.props.payDone();
            }}>已完成付款</Button>
          }
          {/* {
            this.props.type == "pay" && <Button className="x-shareOrPayLayer-button x-shareOrPayLayer-button-back" onClick={() => {
              history.back();
            }}>返回</Button>
          } */}
        </div>
      </div>
    );
  }
}

App.defaultProps = {
  show: false
};

export default App;
